//35.第十二步：引入createSlice和axios请求，然后进行配置，因为是异步action，如果直接在reducers中配置，就不是异步了，所以要单独配置
//35.第十三步：引入createAsyncThunk来创建异步action，createAsyncThunk接收两个参数，第一个参数就是type的值，第二个参数是回调函数，这个回调函数就是异步action的函数，在这个回调函数中执行异步操作，并在这个函数中return 请求到的数据，这个return的值就是dispatch中的data
//35.第十四步：异步action写好后，需要在createSlice中书写额外的reducer进行处理，这个属性为extraReducers；值为一个对象，对象中是处理action的reducer函数，函数名是异步action函数的名字，分为三步，分别是异步action成功时，失败时，正在进行中[getMovieAction.fulfilled](prev, action) {};[getMovieAction.rejected](prev, action) {};[getMovieAction.pending](prev, action) {} 。操作数据都在异步action成功时书写，把action的payload（dispatch中传过来的数据）赋值给prev.movielist。
//35.第十五步：在movie组件中需要dispatch这个异步action函数。然后再通过useSelector方法获取reducer中传递的数据，放在虚拟dom上。

import {
  createSlice,
  createAsyncThunk
} from "@reduxjs/toolkit";

import {
  movieRequest
} from '../../api'


//我们使用createAsyncThunk方法来创建异步action
//createAsyncThunk接受两个参数,第一个参数是type的值,第二个参数是回调函数,回调函数就是异步action的函数
export const getMovieAction = createAsyncThunk("movie/getMovieList", async () => {
  //在当前函数中执行异步操作
  const result = await movieRequest();
  console.log(result, "result");
  //在这个函数中return的值，就是在thunk中间件中再次disptch的值
  return result.data.data.list
})

const movieSlice = createSlice({
  name: "movie",
  initialState: {
    movieList: []
  },
  reducers: {

  },
  //异步action的处理,需要书写额外的reducer处理,不能写在reduers中,因为reducers会创建一个对应的action
  extraReducers: {
    [getMovieAction.fulfilled](prev, action) {
      console.log("异步action成功--getMovieAction");
      console.log(prev, action);
      prev.movieList = action.payload
    },
    [getMovieAction.rejected]() {
      console.log("异步action失败--getMovieAction");
    },
    [getMovieAction.pending]() {
      console.log("异步action正在进行中--getMovieAction");
    },
  }
})

export default movieSlice.reducer;